<template>
  <div class="flowbigbox">
    <div class="topbox">
      <div >
        <el-radio-group v-model="radio3" size="small" @change="changradio">
          <el-radio-button label="电"></el-radio-button>
          <el-radio-button label="能"></el-radio-button>
          <el-radio-button label="碳"></el-radio-button>
        </el-radio-group>
      </div>
      <el-divider></el-divider>
      <div class="forms"> 
        <el-form ref="form" :model="form" label-width="80px" label-position="left">
           <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="用电企业">
                <FilterSelect 
                ref="yonghu" 
                :optionlist="yonghulist" 
                :valuekey="{name:'name',value:'id'}"
                @changeselect="changecompany"
                :defaultvalue="companyId"
                ></FilterSelect>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-top: 4px;display: flex;">
              <el-radio-group v-model="form.dateType" size="small" style="margin-right: 20px;">
                <el-radio-button  label="1">日</el-radio-button>
                <el-radio-button  label="2">月</el-radio-button>
                <el-radio-button  label="3">年</el-radio-button>
              </el-radio-group>
              <el-date-picker v-if="form.dateType=='1'" v-model="form.value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" style="flex: 1;"></el-date-picker>
              <el-date-picker v-else-if="form.dateType=='2'" v-model="form.value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="flex: 1;"></el-date-picker>
              <el-date-picker v-else v-model="form.value3" type="year" value-format="yyyy" placeholder="选择年" size="small" style="flex: 1;"> </el-date-picker>
            </el-col>
            <el-col :span="6" v-if="radio3=='电'">
              <el-form-item label="类型">
                <el-radio-group v-model="form.type" size="small" style="width: 100%;">
                  <el-radio label="elec">电量</el-radio>
                  <el-radio label="load">负荷</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="radio3=='能'">
              <el-form-item label="能源介质">
                <el-radio-group v-model="form.energyType" size="small" style="width: 100%;">
                  <el-radio  v-for="(item,index) in leixinglist" :key="index" :label="item.code">{{item.name}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="radio3=='碳'?12:7" style="margin-top: 4px;text-align: right;">
              <el-button size="small" type="primary" @click="submit">查 询</el-button>
            </el-col>
           </el-row>
        </el-form>
      </div>
    </div>
    <div class="bodybox">
      <EleImage ref="EleImage" v-show="radio3=='电'" :form="form" :companyId="companyId"></EleImage>
      <CanImage ref="CanImage" v-show="radio3=='能'" :form="form" :companyId="companyId"></CanImage>
      <CarbonImage ref="CarbonImage" v-show="radio3=='碳'" :form="form" :companyId="companyId"></CarbonImage>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
import { getnengyuantypeapi } from '@/api/energy-consumption/Basic-information/gateway'
import EleImage from './elecimage'
import CanImage from './canimage'
import CarbonImage from './carbonimage'
export default {
  name: 'CallPoliceIndex',
  components: {
    EleImage,
    CanImage,
    CarbonImage,
    FilterSelect
  },
  data() {
    return {
      form:{dateType:'1',type:'elec',danweiname:''},
      radio3: '电',
      yonghulist: [],
      leixinglist: [],
      companyId:''
    };
  },

  async mounted() {
    this.gettime()
    // 获取用电单位
    const { data: { list } } = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:this.yonghulist[0].id)
    this.$set(this.form,'danweiname',this.yonghulist[0].name)
    // 获取能源类型并筛选
    const res = await getnengyuantypeapi()
    this.leixinglist = res.data.list
    this.$set(this.form,'energyType',this.leixinglist[0].code)
    this.changradio('电')
  },

  methods: {
    submit() {
      this.changradio(this.radio3)
    },
    changradio(val) {
      if (val == '电') {
        if (this.form.type == 'elec') {
          this.$refs.EleImage.isshow='elec'
          this.$refs.EleImage.getelecechart()
        } else if (this.form.type == 'load') {
          this.$refs.EleImage.isshow='load'
          setTimeout(() => this.$refs.EleImage.getshangjiechart(), 100);
        }
      } else if (val == '能') {
        this.$refs.CanImage.getnenghaoechart()
      } else if (val == '碳') {
        this.$refs.CarbonImage.gettanpaiechart()
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this.form,'value3',year.toString())
      this.$set(this.form,'value2',year + '-' + month)
      this.$set(this.form,'value1',year+'-'+month+'-'+day)
    },
    // 企业下拉
    changecompany(val) {
      localStorage.setItem('companyId', val)
      this.form.danweiname=this.yonghulist.filter(ele=>ele.id==val)[0].name
    }
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.flowbigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 150px;
    padding: 20px;
    background-color: #fff;
  }
  .bodybox{
    height: calc(100% - 160px);
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
  }
}
::v-deep .el-divider{
  margin: 20px 0;
}
</style>